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Making  an  HTTP  request 

• Connect  to  the  server 

• a "hand  shake" 

• Request  a document  (or  the  default  document) 

• GET  http://dr-chuck.com/pagel.htm 

• GET  http://www.mlive.com/ann-arbor/ 

• GET  http://www.facebook.com 
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^ http://www.dr-chuck.com/pagel.htm 
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n intruductory  Guide  to  the  Google  Application  Engine 


http://code.google.com/appengine/ 


http : / / 


www.dr-chuck.com 


/pagel . htm 


protocol 


host 


document 


O O O http://www.dr-chuck.com/pagel.htm 

http://www.dr-chuck.com/pagel.htm  *^Q.-  Coogle  » 


The  First  Page 


If  you  like,  you  can  switch  to 


Browser 


Co  to  "http://www.dr-c 


OOO  http://www.dr-chuck.com/pagel.htm 
0 http://www.dr-chuck.com/pagel.htm  Coogle  o')  » 

The  First  Page 

If  you  like,  you  can  switch  to  the  Second  Page. 


Co  to  "http://www.dr-chuck.com/page2.htm" 


Web  Server 


O O O http://www.dr-chuck.com/pagel.htm 
0 http://www.dr-chuck.com/pagel.htm  VQ-  coogle  O')  » 


The  First  Page 


If  you  like,  you  can  switch  to 


Browser 


Co  to  "http://www.dr-chuck.com/page2.htm" 


Web  Server 


GET  http://www.dr-chuck.com/page2.htm 


DOD  http://www.dr-chuck.com/pagel.htm 
ft  http://www.dr-chuck.com/pagel.htm  *^Q.-  Coogle  O'1 » 


The  First  Page 


If  you  like,  you  can  switch  to 


Browser 


Co  to  "http://www.dr-chuck.com/page2.htm" 


Web  Server 


GET  http://www.dr-chuck.com/page2.htm 


Onn  http://www.dr-chuck.com/pagel.htm 
ft  http://www.dr-chuck.com/pagel.htm  *^Q.-  Coogle  O'1 » 


The  First  Page 


If  you  like,  you  can  switch  to 


Browser 


<h  I >The  Second  Page</h  I > 
<P> 

If  you  like,  you  can  switch 
back  to  the 
<a  href="page  I .htm"> 

First  Page</a>. 

</p> 


nOn  http://www.dr-chuck.com/page2.htm 
0 http://www.dr-chuck.com/page2.htm  * ^Q,-  Google  > 

The  Second  Page 

If  you  like,  you  can  switch  back  to  the  First  Page. 


Co  to  "http://www.dr-chuck.com/page2.htm" 


Web  Server 


GET  http://www.dr-chuck.com/page2.htm 


Onn  http://www.dr-chuck.com/pagel.htm 
ft  http://www.dr-chuck.com/pagel.htm  Coogle  ©0  » 


The  First  Page 


If  you  like,  you  can  switch  to 


Browser 


<h  I >The  Second  Page</h  I > 
<P> 

If  you  like,  you  can  switch 
back  to  the 
<a  href="page  I .htm"> 

First  Page</a>. 

</p> 


Co  to  "http://www.dr-chi 


An  HTTP  request  - response  cycle 


Making  an  HTTP  request 

• Connect  to  the  server 

• a "hand  shake" 

• Request  a document  (or  the  default  document) 

• GET  http://dr-chuck.com/pagel.htm 

• GET  http://www.mlive.com/ann-arbor/ 

• GET  http://www.facebook.com 


Getting  Data  From  The  Server 


• Each  the  user  clicks  on  an  anchor  tag  with  an  href=  value  to  switch  to 
a new  page,  the  browser  makes  a connection  to  the  web  server  and 
issues  a “GET”  request  - to  GET  the  content  of  the  page  at  the 
specified  URL 

• The  server  returns  the  HTML  document  to  the  Browser  which 
formats  and  displays  the  document  to  the  user. 


$ telnet  www.dr-chuck.com  80 
Trying  74.208.28.177... 

Connected  to  www.dr-chuck.com. 

Escape  character  is  'A]\ 

GET  http://www.dr-chuck.com/page  I .htm 
<h  I >The  First  Page</h  I > 

<P> 

If  you  like,  you  can  switch  to  the 
<a  href="http://www.dr-chuck.com/page2.htm"> 
Second  Page</a>. 

</p> 

Connection  closed  by  foreign  host. 
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Hypertext  Transfer  Protocol  — HTTP/ 1.0 
Status  of  This  Memo 

This  memo  provides  information  for  the  Internet  community.  This  memo 
does  not  specify  an  Internet  standard  of  any  kind.  Distribution  of 
this  memo  is  unlimited. 

IESG  Note: 

The  IESG  has  concerns  about  this  protocol,  and  expects  this  document 
to  be  replaced  relatively  soon  by  a standards  track  document. 


The  Hypertext  Transfer  Protocol  (HTTP)  is  an  application- level 
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5.  Request 


A request  message  from  a client  to  a server  includes,  within  the 
first  line  of  that  message,  the  method  to  be  applied  to  the  resource, 
the  identifier  of  the  resource,  and  the  protocol  version  in  use.  For 
backwards  compatibility  with  the  more  limited  HTTP/0.9  protocol, 
there  are  two  valid  formats  for  an  HTTP  request: 

Request  - Simple -Request  | Full-Request 

Simple-Request  ■ "GET"  SP  Request-URI  CRLF 


Full-Request 


Request-Line 
* ( General-Header 
| Request-Header 
| Entity-Header  ) 
CRLF 

[ Entity-Body  ] 


Section  5.1 
Section  4.3 
Section  5.2 
Section  7.1 

Section  7.2 


If  an  HTTP/1.0  server  receives  a Simple- Request,  it  must  respond  with 
an  HTTP/0.9  Simple-Response.  An  HTTP/ 1.0  client  capable  of  receiving 
a Full-Response  should  never  generate  a Simple-Request. 

5 . 1 Request-Line 

The  Request-Line  begins  with  a method  token,  followed  by  the 

Pamioaf  _TTPT ani^ f ho r>ynf  uora  -i  r>r> anH owHinn  uif  h PPT.P TKo 


Welcome  to  Facebook!  | Facebook 


( n^^W^ere^lmeng/sl539/w09/http/fbook.hi 


£ (JGkf  Google  Q) 


Most  Visited  - Getting  Started  Late 

:st  Headlines 

@ Disable  * £ Cookies  » J CSS  * 

J Forms  * M Images  » Q Information  » 

Miscellaneous  * Outline 

• * Resize  - 

Tools  * |_|  View  Source  * Options 

facebook 


Facebook  helps  you  connect  and  share  with  Sign  Up 

the  people  in  your  life.  It's  free  and  anyone  can  join 


Full  Name: 
Your  Email: 


I am:  Select  Sex: 

Birthday:  Month:  DaY:  Year:  _ll 

Why  do  I need  to  provide  this? 


By  clicking  Sign  Up.  you  are  indicating  that  you  have  read  and 
agree  to  the  Terms  of  Use  and  Privacy  Policy. 


Hmmm  - This  looks  kind  of  Complex..  Lots  of  GET  commands 


$ telnet  www.facebook.com  80 
Trying  69.63.187.19... 

Connected  to  www.facebook.com. 

Escape  character  is  'A]\ 

GET/ 

<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Strict//EN" 
"http://www.w3.org/TR/xhtml  I /DTD/xhtml  I -strict.dtd"> 

<html  xmlns="http://www.w3.org/l  999/xhtml"  xml:lang="en"  lang="en" 
id="facebook"  class-'  noJs"> 

<head> 

<meta  http-equiv="Content-type"  content="text/html;  charset=utf-8"  /> 
<meta  http-equiv="Content-language"  content="en"  /> 

<meta  http-equiv="X-UA-Compatible"  content="IE=EmulatelE7"  /> 
<script  type- 'text/javascript"> 


Firebug  helps  again 

• If  you  haven't  already  installed  Firebug,  you  need  it  now 

• It  can  help  explore  the  HTTP  request-response  cycle 

• Some  simple-looking  pages  involve  lots  of  requests: 

• HTML  page(s) 

• Image  files 

• CSS  Style  Sheets 

• Javascript  files 
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AppEngineLearn  Book  Instructor  Python  Add  Engine  1 


This  site  provides  materials  to  help  learn  the  Google  Application  Engine.  Before  you  start  to  learn 
the  Google  Application  Engine  you  should  be  basically  familiar  with  the  Python  programming 
language. 


New:  You  can  take  a look  at  the  draft  book  chapters  for  my  upcoming  O'Reilly  AppEngine  book 
titled,  "Building  Cloud  Applications  with  Google  AppEngine". 

• Installing  Python  and  JEdit  - We  recommend  using  JEdit  as  your  programmer  editor  and  it 
will  be  used  throughout  the  Podcasts. 

• Installing  the  Application  Engine  and  writing  your  first  Application. 

o Macintosh:  (Handout.  Source  Code.  Screencast.  YouTube) 
o Windows  Vista:  (Handout.  Source  Code.  High  Quality  Screencast.  YouTube) 


ft  Inspect  Clear  Profile  Q,  ® © 

Console  ~ HTML  CSS  Script  DOM  Net  Options 


* 


Console  panel  is  disabled 

Use  this  page  to  enable  or  disable  following  panels.  Enabling  these  panels  will  reduce  performance  and  will 
cause  a page  reload. 


O Console  Support  for  Console  logging. 

M Script  Support  for  JavaScript  debugging. 
0 Net  Support  for  Network  monitoring. 


Disabled  Always 

Enabled  for  www.appenginelearn.com 
Enabled  for  www.appenginelearn.com 


( Apply  settings  for  www.appenglnelearn.com  ) 


Transferring  data  from  i2.ydmg.com... 


Sending  Data  to  an  Application 
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Q Disable  • & Cookies 


AppEngineLearn:  An  Introductory  Cuide  to  the  Coogle  Application  Engine 
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^ http://www.appenginelearn.com/ 


Otl?  T)  ' ClCll  Coogle 


AppEngineLearn 


This  site  provides  materials  to  help  learn  the  Google  Application  Engine.  Before  you  start  to  learn 
the  Google  Application  Engine  you  should  be  basically  familiar  with  the  Python  programming 
language. 


New:  You  can  take  a look  at  the  draft  book  chapters  for  my  upcoming  O'Reilly  AppEngine  book 
titled,  "Building  Cloud  Applications  with  Google  AppEngine". 


Installing  Python  and  JEdit  - We  recommend  using  JEdit  as  your  programmer  editor  and  it 
will  be  used  throughout  the  Podcasts. 


• Installing  the  Application  Engine  and  writing  your  first  Application. 


o Macintosh:  (Handout.  Source  Code.  Screencast.  YouTube) 
o Windows  Vista:  (Handout.  Source  Code.  High  Quality  Screencast.  YouTube) 


4?  Inspect  Clear 
Console  HTML  CSS 

► GET  www.appenginel 

► GET  glike.css 

► GET  csev.jpg 

► GET  ile-main.js 

► GET  93HjHU25low4h 

► GET  l.swf?swf=http* 

► GET  cps-vfl78303.sw 

► GET  crossdomain.xm 

► GET  hqdefaulLjpg 


HTML  CSS  JS  XHR  Ima 
Script  DOM  Net  ▼ 


200  OK 
200  OK 
200  OK 
200  OK 
303  See  Other 
200  OK 
200  OK 
200  OK 
200  OK 


appenginelearn. 

appenginelearn. 

appenginelearn. 

cloudsocial.org 

youtube.com 

s.ytimg.com 

i2.ytimg.com 


9 requests 


Flash 


l 7 KB 
l 3 KB 
1 15  KB 
88  B 

724  B 
120  KB 
97  B 
24  KB 

167  KB 


: 


a 


® © 


Options 


1.02s 


Forms  - Input  on  the  Web 

http: //local  host:  8080/ 

0http://localhost:8O8O/  - Q-  Google  » 


Your  guess  is  -1 
Your  guess  is  too  low 


Enter  Guess:  Input  Area 

Submit  < Submit  Button  Whole  Form 


Why  do  we  call  them  forms? 


A 


Forms  Need  Servers 


• Forms  effectively  gather  data  from  the  user  and  “submit”  it  to  a web 
page  on  a server 

• The  earliest  form  of  server-side  processing  was  called  GGI  - Which 
stood  for  Common  Gateway  Interface 

• CGI  allows  software  to  “receive”  the  input  parameters  and  produce 
the  HTML  response  - rather  than  simply  reading  the  HTML  content 
from  a file 

http://en.wikipedia.org/wiki/Common_Gateway_lnterface 


Using  Forms  Without  Servers 

• Submitting  form  data  works  without  a server  - the  browser  moves 
from  static  page  to  static  page 

• But  the  data  from  the  forms  is  neither  saved  no  is  it  usable 


• Typical  Server 

• Permanently  connected  to 
the  network 

• Has  static  address 

• Is  part  of  a cloud 

• Clients 

• Browsers 

• Many  clients  at  the  same 
time  using  the  server 


Pressing  Submit  (Get) 


• When  you  fill  in  a form  and  press  “Submit”  the  browser  packs  up  the 
parameters  of  the  form  and  sends  them  to  the  server  using  the 
“name=”  values  as  the  parameter  names  and  the  field  contents  as  the 
values. 

• Then  this  request  returns  new  HTML  which  is  shown  in  the  browser. 


O O O http://localhost:8080/ 

0 http://localhost:8080/  H Or  Google  » 


Your  guess  is  -1 
Your  guess  is  too  low 


SERVER 


Enter  Guess:  20 


http://locaihost:8080/ 

^http://localhost:8080/  - Q.’  Google  » 


Your  guess  is  -1 
Your  guess  is  too  low 

Enter  Guess:  20  w 


print  "Your  guess  is",  guess 
answer  = 42 


if  guess  < answer  : 

print  "Your  guess  is  too  low" 


http://localhost:8080/ 

f*  http://localhost:8080/  © - Coogle  » 


Your  guess  is  20 
Your  guess  is  too  low 


Enter  Guess:  25 

( Submit  'l 


guess 

print 

guess 

print 


==  answer  : 
"Congratulations ! " 

> answer  : 

"Your  guess  is  too  high" 


So  lets  write  some  code  and  make 
a server... 


http://localhost:8080/ 

0http://localhost:8O8O/  * Google  » 

Your  guess  is  -1 
Your  guess  is  too  low 

Enter  Guess: 

( Submit ") 

<p>Your  guess  is  20.</p> 

<p>Your  guess  is  too  low.</p> 
<form  method="post"  action="/"> 
<P> 

Enter  Guess: 

< input  type=' 
</p> 

<P> 

<input  type=' 
</p> 

</form> 

’text"  name=" guess"  /> 
’submit"  /> 

<p>Your  guess  is  20.</p> 

<p>Your  guess  is  too  low.</p> 

<form  method="post"  action="/"> 

<P> 

Enter  Guess : 

<input  type="text"  name="guess"  /> 
</p> 

<P> 

<input  type=" submit"  /> 

</p> 

</ form> 


<p>Your  guess  is  20.</p> 

<p>Your  guess  is  too  low.</p> 

<form  method="post"  action="/"> 

<P> 

Enter  Guess : 

<input  type="text"  name="guess"  /> 
</p> 

<P> 

<input  type=" submit"  /> 

</p> 

</ form> 


<p>Your  guess  is  20.</p> 

<p>Your  guess  is  too  low.</p> 

<form  method="post"  action="/"> 

<P> 

Enter  Guess : 

<input  type="text"  name="guess"  /> 
</p> 

<P> 

<input  type=" submit"  /> 

</p> 

</ form> 


http:// local  host:  8080/ 

0http://localhost:8O8O/  - Q-  Google  » 


Your  guess  is  -1 
Your  guess  is  too  low 


Enter  Guess: 

(Submit) 


A 


Attributes  of  a form  element 

• "action"  attribute  tells  where  to  submit  the  form 

• Usually  the  path  to  a script  or  program  on  the  server  that 
processes  the  form  inputs 

• "method"  attribute  tells  how  to  submit  the  form 

• In  this  case  using  HTTP  POST 

• See  page  30  of  RFC  1 945 


<p>Your  guess  is  20.</p> 

<p>Your  guess  is  too  low.</p> 

<f orm  method="post"  action=M / "> 

<P> 

Enter  Guess: 

Cinput  type="text"  name="guess"  /> 
</p> 

<p> 

<input  type=" submit"  /> 

</p> 

</ form> 


GET  .vs.  POST 

• Two  ways  the  browser  can  send  parameters  to  the  web  server 

<nerdy-stuff> 

• GET  - Parameters  are  placed  on  the  URL  which  is  retrieved 

• POST  - The  URL  is  retrieved  and  parameters  are  appended  to  the 

request  in  the  the  HTTP  connection 

Intended  purpose  of  POST 

• Posting  a message  to  a bulletin  board,  newsgroup,  mailing  list 

• Annotation  of  existing  resources 

• Extending  a database  through  an  append  operation 

• Creating  a new  object 

• Providing  a block  of  data,  such  as  the  result  of  submitting  a form 


Normal  use  of  GET 


Web  Server 


GET  http://www.dr-chuck.com/page2.htm 


O O O http://www.dr-chuck.com/pagel.htm 
ft  http://www.dr-chuck.com/pagel.htm  *^Q.-  Coogle  O'1 » 


The  First  Page 


If  you  like,  you  can  switch  to 


Browser 


<h  I >The  Second  Page</h  I > 
<P> 

If  you  like,  you  can  switch 
back  to  the 
<a  href="page  I .htm"> 

First  Page</a>. 

</p> 


OOO  http://www.dr-chuck.com/page2.htm 
M http://www.dr-chuck.com/page2.htm  * ^Q,-  Google  > 

The  Second  Page 

If  you  like,  you  can  switch  back  to  the  First  Page. 


Co  to  "http://www.dr-chuck.com/page2.htm" 


As  opposed  to  GET 


• Retrieve  a resource  identified  by  the  path  portion  of  the  URL 


Browser 


<input  type="text"  name="guess"  /> 


Web  Server 

Browser 

<input  type="text"  name="guess"  /> 

Passing  Parameters  with  GET 

GET  /simpleform.html?guess=25 


Web  Server 

Accept:  www/source 

Accept:  text/html 

User-Agent:  Lynx/2.4  libwww/2. 14 

HTTP 

Request 

POST  /simplefornn.htnnl 
Accept:  www/source 
Accept:  text/html 
User-Agent:  Lynx/2.4  libwww/2. 14 

Browser 

Content-type:  application/x-www-form-urlencoded 

Content-length:  13 

guess=25 

<input  type- 'text"  name- guess"  /> 

Web  Server 

POST/ 

HTTP 

Accept:  www/source 
Accept:  text/html 

Request 

User-Agent:  Lynx/2.4  libwww/2. 1 4 
Content-type:  application/x-www-form-urlencoded 
Content-length:  8 
guess=25 

Browser 

<input  type="text"  name="guess"  /> 

</nerdy-stuff> 


“Rules”  for  GET  and  POST 

• GET  is  used  when  your  are  reading  or  searching  things 

• POST  is  used  when  data  is  being  created  or  modified 

• Web  search  spiders  will  follow  GET  URLs  but  generally  not  POST 
URLs 

• GET  URLs  should  be  “idempotent”  - the  same  URL  should  give  the 
“same  thing’’  each  time  you  access  it 

• GET  has  an  upper  limit  of  the  number  of  bytes  of  parameters  and 
values  (think  about  2K) 


O O O http: //local host: 8080/ 

f^http://localhost:8080/  - Q,-  Google  » 


Your  guess  is  -1 
Your  guess  is  too  low 

Enter  Guess:  20  w 


print  "Your  guess  is",  guess 
answer  = 42 


if  guess  < answer  : 

print  "Your  guess  is  too  low" 


http://localhost:8080/ 

http://localhost:8080/  © - Coogle  » 


Your  guess  is  20 
Your  guess  is  too  low 


Enter  Guess:  25 

( Submit  'l 


guess 

print 

guess 

print 


==  answer  : 
"Congratulations ! " 

> answer  : 

"Your  guess  is  too  high" 


Writing  Your  AppEngine 
Application 


Application  Folder 


• app.yaml  - Defines  the  name  of  your 

11  1*11  1 . v SI  ae-01-guess 

application  and  the  high  level  routing  app.yaml 

of  incoming  URLs  index.py 

index.yaml 

• index.py  - The  code  for  your 
application 

• index.yaml  - Created  byApp  Engine 


OHO  http://localhost:8080/ 

0 http:  //  local  host:8080/ 

- (Q,-  Google  ) » 

index.py 

print  "Your  guess  is",  guess 

answer  = 

42 

if  guess 

< answer  : 

print 

"Your  guess  is  too  low" 

if  guess 

==  answer  : 

http: // localhost:  8080/ 

print 

"Congratulations ! " 

0 http://localhost:8080/ 

© - Q,-  Coogle  » 

/ 

Your  guess  is  20 

f if  guess 

> answer  : 

Your  guess  is  too  low 

i 

f print 

"Your  guess  is  too  high" 

Enter  Guess:  25 

w 

( Submit ) 

import  sys  index.py 

print  'Content-Type:  text/html' 
print  " 

print  '<pre>' 

# Read  the  form  input  which  is  a single  line  as  follows 

# guess=42 

data  = sys.stdin.read() 

# print  data 
try: 

guess  = int(data[data.find('=')+l:]) 
except: 
guess  = - 1 

print  'Your  guess  is  too  high' 


app.yaml 


• The  app.yaml  file 
routes  requests 
amongst  different 
Python  scripts. 


application:  ae-0 1 -guess 
version:  I 
runtime:  python 
api—Version:  I 

handlers: 

- url:  /.* 
script:  index.py 


Web  Server 

POST/ 

HTTP 

Accept:  www/source 
Accept:  text/html 

Request 

User-Agent:  Lynx/2.4  libwww/2. 1 4 
Content-type:  application/x-www-form-urlencoded 
Content-length:  8 
guess=25 

Browser 

<input  type="text"  name="guess"  /> 

import  sys 

import  sys 

print  'Content-Type:  text/html' 

POST/ 

print  Content-Type: Accept:  ^/source 

print  " 

print"  Accept:  text/html 

print  '<pre>' 

print  '<pre>'  User-Agent:  Lynx/2.4  libwww/2. 14 

Content-type:  application/x-www-form-urlencoded 

# Read  the  form  input  which  is  a single  line  as  follows 

# Read  the  form  inpC°ntent-length:8 

# guess=42 

j,  guess=25 

# guess-42  6 

data  = sys.stdin.read() 

data  = sys.stdin.read() 

# print  data 

# print  data 

try: 

guess  = int(data[data.find('=')+ 1:]) 

try:  CfUGSS-25 

guess  = i nt  (data  [d  ata.fi  n d ('=')  + 1 :])  ^ 

except: 

except: 

guess  = - 1 

guess  = - 1 

print  'Your  guess  is  too  high' 

print  'Your  guess  is  too  high' 

guess=25 

guess=25 

5 

guess  = int(data[data.find( '=' ) +1 : ] ) 

guess  = int(data[data.find( '=' ) +1 : ] ) 

guess=25 

guess=25 

5 6 

5 6 

guess  = int(data[data.find( '=' ) +1 : ] ) 

guess  = int (data [data. find( '=') +1 :] ) 

import  sys 

print  'Content-Type:  text/html' 
print  " 

print  '<pre>' 


# Read  the  form  input  which  is  a single  line  as  follows 

# guess=42 

data  = sys.stdin.read() 

# print  data 
try: 

guess  = int(data[data.find('=')+l:]) 
except: 
guess  = - 1 

print  'Your  guess  is  too  high' 


guess=25 


print  'Your  guess  is',  guess 

answer  = 42 
if  guess  < answer  : 
print  'Your  guess  is  too  low' 
if  guess  ==  answer: 
print  'Congratulations!' 
if  guess  > answer  : 
print  'Your  guess  is  too  high' 

print  '</pre>' 

print  '"<form  method="post"  action="/"> 

<p>Enter  Guess:  <input  type="text"  name="guess"/></p> 
<p><input  type="submit"></p> 

</form>'" 


print  'Your  guess  is',  guess 


answer  = 42 
if  guess  < answer  : 
print  'Your  guess  is  too  low' 
if  guess  ==  answer: 
print  'Congratulations!' 
if  guess  > answer  : 
print  'Your  guess  is  too  high' 

print  '</pre>' 
print  '"<form  method="post"  action="/"> 

<p>Enter  Guess:  <input  type="text"  name="guess"/></p> 
<p><input  type="submit"></p> 

</form>'" 


nO^  http://localhost:8080/ 

ft  http://localhost:8080/  * Coogle  » 


Your  guess  is  -1 
Your  guess  is  too  low 


Enter  Guess: 


Fieldset  and  Legend 


<form  method="get"  action="simpleform.htmr> 
<fieldset> 

<legend>AII  About  You</legend> 


<P> 

<label  for="yourname">Enter  your  name:</label> 

<input  type="text"  name="yourname"  id="yourname"  /> 

</p> 

<p><input  type="submit"  /></p> 

</fieldset> 

</form> 


— All  About  You  — 
Enter  your  name: 


Advanced  Form  Fields 


Input  Types 

• Text 

• Password 

• Checkbox 

• Radio  Button 

• Hidden 

• Submit 

• File 


Text  Input 

<p>  r 

<label  for="nameinp">Enter  your  name:</label> 

<input  type-'text"  name- yourname"  id="nameinp"  /> 

</p> 

<label  for="nickinp">Enter  your  nickname:</label> 

<input  type="text"  name="nickname"  id="nickinp"  value="Bob"  /> 

</p> 

The  id=  attribute  is  used  to  reference  the  field  inside  the 
HTML  document.  The  name=  attribute  is  the  parameter 
name  used  to  submit  the  data  to  the  server. 

Text  fields  can  either  start  out  blank  of  have  content  pre-populated. 


Hidden 


• Hidden  fields  are  used  generally  so  that  a program  in  a web  server  can 
send  some  internal  information  back  to  itself. 


<input  type="hidden"  name="peekaboo"  value="hereiam"  /> 


Password  In  put  Type 

<p> 

<label  for- 'password "> Your  password:</label> 

<input  type- 'password"  id="password"  name="password"  /> 

</p> 


Your  password: 


This  only  hides  the  password  from  view  on  the  screen  - to  protect  the  password  while  in- 
transit, you  need  to  send  the  data  over  https. 


Checkbox  - Multiple  Select 

<P> 

<input  type="checkbox"  name="terms"  id="termid"  /> 

<label  for="termid">l  have  read  the  terms  and  conditions.</label> 

</p> 

<P> 

<input  type="checkbox"  name="offers"  id="offerid"  /> 

<label  for="offerid">l  agree  that  you  can  contact  me  regarding 
special  offers  in  the  future. </label> 

</p> 

0 I have  read  the  terms  and  conditions. 

□ I agree  that  you  can  contact  me  regarding  special  offers  in  the  future. 


Checkbox  - Preselected 

<p> 

<input  type="checkbox"  name="terms"  id="termid"  /> 

<label  for="termid">l  have  read  the  terms  and  conditions</label> 

</p> 

<P> 

<input  type="checkbox"  name="offers"  id="offerid"  checked="checked"  /> 
<label  for="offerid">l  agree  that  you  can  contact  me  regarding 
special  offers  in  the  future</label> 

</p> 


Drop  Down  List 


Which  best  describes  you?  Web  Designer 


<P> 

<label  for="role">Which  best  describes  you?</label> 
<select  name="role"  id="role"> 


<option  value= 
<option  value= 
<option  value= 
<option  value= 
<option  value= 
</select> 

</p> 


” I ”>Secretary</option> 

”2”  selected="selected">Web  Designer</option> 
”3”>Manager</option> 

”4”>Cleaner</option> 

”5”>Other</option> 


A drop-down  list  generates  a single 
value  when  it  is  sent  to  the  server. 


role=2 


® In  the  morning 

Radio  Buttons  - Choice  O In  the  afternoon 

O In  the  evening 


<p> 

<input  type="radio"  name="timeslot"  id="mor"  value="morning"  checked="checked"  /> 
<label  for="mor">ln  the  morning</label> 

<br  /> 

<input  type="radio"  name="timeslot"  id="aft"  value="afternoon"  /> 

<label  for="aft">ln  the  afternoon</label> 

<br  /> 

<input  type="radio"  name="timeslot"  id="eve"  value="evening"  /> 

<label  for="eve  ">ln  the  evening</label> 

</p> 


Please  tell  us  about  your  hobbies: 

Textarea  for 
paragraphs 

| Submit  Query  ] 

<R> 

<label  for- 'hobbies">Please  tell  us  about  your  hobbies:</label> 

</p> 

<textarea  name- 'hobbies"  rows- 7"  cols- '40"  id- 'hobbies"> 

Old  Value 
</textarea> 

</p> 

Textareas  can  become  rich  text  areas  - http://tinymce.moxiecode.com/ 


File  Uploads 

<input  type=”file”  name=,,datainM  accept="text/htmr'> 

• File  input  is  simple  on  the  browser 

• You  can  optionally  insist  on  only  certain  file  types 

• File  input  processing  depends  on  which  software  is  receiving  the  file 
input  on  the  server 


Dumper  Program: 
Working  in  the  Depths  of  the 
Machine 


Submit  Button(s) 


<p><input  type=”submit”/></p> 


When  you  have  multiple 
submit  buttons  the  value  can 
be  used  to  figure  out  which 
button  was  pressed. 


<!--  Multiple  submit  buttons  --> 


<?> 


<input  type=”submit”  name=”subtype”  value=”Submit”/> 
<input  type=”submit”  name=”subtype”  value=”Cancel7> 


http:// ...  /url?subtype=Submit 
http:// ... /url?subtype=Cancel 


Value 


Dumper 

• This  application  makes  a form  and  then  we  submit  the  form 
via  POST 

• This  application  dumps  the  input  variables  that  come  in  from 
the  HTTP  Request 

• This  is  the  most  basic  view  of  a web  application 

• It  is  like  a Dinosaur  - it  is  a web  program  written  using  the 
“old  ways” 


Common  Gateway  Interface 


• A set  of  rules  about  taking  input  parameters  and  data  from  an 
incoming  HTTP  request  and  handing  them  to  the  program. 


HTTP  Request  / Response  Cycle 


Web  Server 


HTTP 

Request 


HTTP 

Response 


GET  /index.html  BfOWSeT 

Accept:  www/source 

Accept:  text/html 

User-Agent:  Lynx/2.4  libwww/2. 14 


<head>  ..  </head> 
<body> 

<h  I >Welcome  to  my 
application</h  I > 

</body> 


http://www.oreilly.com/openbook/cgi/ch04_02.html 


HTTP  Request  / Response  Cycle 


Web  Server 


HTTP  I HTTP 

Request  I Response 

I T 

Browser 


http://www.oreilly.com/openbook/cgi/ch04_02.html 


Passing 

Parameters  to  The  Server 

GET  /simpleform.html?guess=25 
Accept:  www/source 

Web  Server 

Accept:  text/html 

User-Agent:  Lynx/2.4  libwww/2. 1 4 

HTTP  1 

Request  I 

1 

POST  /cgi-bin/program.pl  HTTP/ 1.0 
Accept:  www/source 
Accept:  text/html 
User-Agent:  Lynx/2.4  libwww/2. 1 4 

Browser 

Content-type:  application/x-www-form-urlencoded 

Content-length:  1 3 

guess=25 

<input  type="text"  name="guess"  /> 

The  Common  Gateway  Interface 


The  Common  Gateway  Interface,  or  CGI,  is  a standard  for  external  gateway  programs  to  interface  with  information 
servers  such  as  HTTP  servers. 

The  current  version  is  CGI/1 .1 . 


CGI  Documentation 

If  you  have  no  idea  what  CGI  is,  you  should  read  this  introduction. 

Once  you  have  a basic  idea  of  what  CGI  is  and  what  you  can  use  it  for,  you  should  read  this  primer  which  will  help  you 
get  started  writing  your  own  gateways. 

If  you  are  interested  in  handling  the  output  of  HTML  forms  with  your  CGI  program,  you  will  want  to  read  this  guide  to 
handling  forms  with  CGI  proprams. 

Security  is  a crucial  issue  when  writing  CGI  programs.  Please  read  these  tips  on  how  to  write  CGI  programs  which  do  not 
allow  malicious  users  to  abuse  them. 

When  you  get  more  advanced,  you  should  read  the  interface  specification  which  will  help  you  utilize  CGI  to  the  fullest 
extent.  If  you  are  a server  software  author,  it  will  help  you  add  CGI  compliance  to  your  information  server. 


http://hoohoo.ncsa.uiuc.edu/cgi/in.html 


<form  method- 'post"  action='7"> 
Zap  Data:  <input  type="text"  name= 

"zap"><br> 

B 

Zot  Data:  <input  type="text"  name= 
<input  type="submit"> 

</form> 

"zot"><br> 

CGI 

r 

o 

Zap  Data:  stuff 

Environment 

Program 

w 

Zot  Data:  More  Stuff 

dict() 

s 

( Submit ) 

Data 

e 

r 

zap=Stuff&zot=MoreStuff 

<form  method=  ....> 

■ot  print 

</form>  ****** 

CGI  In  App  Engine 

• When  a Request  is  received  in  the  App  Engine,  according  to 
the  rules  of  CGI 

• The  environment  variables  such  as  server  name,  document 
path,  etc  come  in  a dictionary  object 

• Any  POST  data  comes  in  on  standard  input  (sys.stdin) 

• Whatever  the  program  prints  goes  to  the  browser  as  the 
HTTP  response 


The  standard  output  (print 

import  os  statements)  produce  the  HTTP 

imP°rt  SXS  Response. 

print  'Content-Type:  text/html' 
print ' ' 

print  '<form  method="post"  action=7">' 

print  'Zap  Data:  <input  type="text"  name="zap"><br>' 

print  'Zot  Data:  <input  type="zot"  name="zot"><br>' 

print  '<input  type="submit">' 

print  ‘</form>’ 

Zap  Data: 

The  output  consists  of  HTTP  Zot  Data: 

headers  followed  by  the  body  of  ( submit ) 

the  document. 


import  sys 


• http://docs.python.org/library/sys.html 


sys.  stdin 
sys.  stdout 
sys.  stderr 

File  objects  corresponding  to  the  interpreter's  standard  input,  output  and  error  streams,  stdin  is  used  for  all 
interpreter  input  except  for  scripts  but  including  calls  to  input o and  raw_inPuto.  stdout  is  used  for  the  output  of 
print  and  expression  statements  and  for  the  prompts  of  input  < > and  raw_inPut  < ) . The  interpreter's  own  prompts 
and  (almost  all  of)  its  error  messages  go  to  stderr.  stdout  and  stderr  needn’t  be  built-in  file  objects:  any  object  is 
acceptable  as  long  as  it  has  a write o method  that  takes  a string  argument.  (Changing  these  objects  doesn't 


print  'Environment  keys:' 
print ' ' 

for  param  in  os.environ.keys(): 

print  param, os.environ[param] 
print ' ' 


Environment  keys: 

HTTP_COOKIE  : camtoolspref- 
SERVER_SOFTWARE  : Development/1 . 0 
SCRIPT_NAME  : 

REQUEST_METHOD  : GET 
PATH_INFO  s / 

SERVER_PROTOCOL  : HTTP/ 1.0 
QUERY_STRING  s 
CONTENT_LENGTH  : 

HTTP_USER_AGENT  : Mozilla/5.0  (Macintosh;  U;  Inte 
HTTP_CONNECTION  : keep-alive 
SERVER_NAME  : localhost 
REMOTE_ADDR  : 127.0.0.1 

PATH_TRANSLATED  : /Users/csev/Desktop/teach/a539- 

SERVER_PORT  : 8081 

AUTH_DOMAIN  : gmail.com 

CURRENT_VERS I 0N_I D : 1.1 

HTTP_H0ST  : localhost : 8081 

TZ  : UTC 

HTTP_CACHE_CONTROL  : max-age=0 
USER_EMAIL  s 

HTTP_ACCEPT  : text/xml, application/xml , applicatio 
APPLICATION_ID  : ae-02 -dumper 
GATEWAY_INTERFACE  : CGI/ 1.1 
HTTP_ACCEPT_LANCUACE  : en-us 

CONTENT_TYPE  : application/x-www-f orm-urlencoded 
HTTP_ACCEPT_ENCODING  : gzip,  deflate 


import  os 


• http://docs.python.org/index.html  — Library  Reference 

• http://docs.python.org/library/os.html 


Process  Parameters 

These  functions  and  data  items  provide  information  and  operate  on  the  current  process  and  user. 

os.  environ 

A mapping  object  representing  the  string  environment.  For  example,  environt'HOME' j is  the  pathname  of  your 
home  directory  (on  some  platforms),  and  is  equivalent  to  getenv<  'home"  ) in  C. 

This  mapping  is  captured  the  first  time  the  os  module  is  imported,  typically  during  Python  startup  as  part  of 
processing  site.py.  Changes  to  the  environment  made  after  this  time  are  not  reflected  in  os. environ,  except  for 
changes  made  by  modifying  os. environ  directly. 


print  'Data' 

count  = 0 

for  line  in  sys. stdin: 

count  = count  + I Reading  the  POST  Data 

print  line  Spaces  are  encoded  as  + 

if  count  > 100: 
break 

print ‘</pre>’ 

HTTP_ACCEPT_LANCUACE  s en-us 

CONTENT_TYPE  : application/x-www-f orm-urlencoded 
HTTP_ACCEPT_ENCODING  : gzip,  deflate 

Data 

zap=Stuf f &zap=More+Stuf f 


Up  Next:  webapp  Framework 


• While  we  could  write  our 
application  using  the  low- 
level  data  provided  to  our 
Python  code,  this  would 
become  very  tedious 

• We  would  constantly  be 
reading  a lot  of  Internet 
Standards  documents 


Environment  keys: 

HTTP_COOKIE  : camtoolspref = 

SERVER_SOFTWARE  : Development/1.0 
SCRIPT_NAME  : 

REQUEST_METHOD  : GET 
PATB_INFO  : / 

SERVER_PROTOCOL  : HTTP/ 1.0 
QUERY_STRING  : 

CONTENT_LENGTH  : 

HTTP_USER_AGENT  : Mozilla/5.0  (Macintosh;  0;  Inte 
BTTP_C0NNECTI0N  : keep-alive 
SERVER_NAME  : localhost 
REM0TE_ADDR  : 127.0.0.1 

PATH_TRANSLATED  : /Users/csev/Desktop/teach/a539- 

SERVER_PORT  : 8081 

AUTH_DOMAIN  : gmail.com 

CURRENT_VERSI0N_ID  : 1.1 

HTTP_H0ST  : localhost : 8081 

TZ  : UTC 

BTTP_CACBE_C0NTR0L  : max-age=0 
0SER_EMAIL  : 

HTTP_ACCEPT  : text/xml, application/xml , applicatio 
APPLICATI0N_ID  : ae-02-dumper 
GATEWAY_INTERFACE  : CGI/ 1.1 
HTTP_ACCEPT_LANGUAGE  : en-us 

C0NTENT_TYPE  : application/x-www-f orm-urlencoded 
HTTP_ACCEPT_ENC0DING  : gzip,  deflate 


Summary 


• We  can  present  our  user  a form  with  fields  to  fill  in. 

• The  data  from  the  form  can  be  sent  to  the  server  of  our 
choice 

• We  write  an  application  on  the  server  which  received  the 
data  and  produces  a response 


